<script>
  // 导入必要的模块
  import { createEventDispatcher } from "svelte";
  import "./Button.css"; // 引入样式文件

  // 定义组件的属性
  export let label = "Button";
  export let type = "button"; // 可选值: 'button', 'submit', 'reset'
  export let color = "primary"; // 可选值: 'primary', 'secondary', 'danger', 'success', 'warning'
  export let disabled = false;

  // 创建事件分发器
  const dispatch = createEventDispatcher();

  // 处理点击事件
  function handleClick(event) {
    dispatch("click", event);
  }
</script>

<!-- 按钮元素 -->
<button class="button {color}" {type} on:click={handleClick} {disabled}>
  {#if label}
    {label}
  {:else}
    <slot />
  {/if}
</button>
